<template>
  <view class="container">
    <view class="user-header">
      <view class="user-info" @click="pageRouter('/pages/profile/profile')">
        <u-avatar size="60" shape="circle" :src="userInfo.avatar"></u-avatar>
        <view class="info-text">
          <view class="user-nickname">{{ hasLogin ? userInfo.nickname || '会员用户' : '匿名用户' }}</view>
          <view class="user-mobile">{{ hasLogin ? userInfo.mobile || ' ' : '登录/注册' }}</view>
        </view>
      </view>
      <!-- <view class="user-setting">
        <u-icon v-if="hasLogin" name="setting" color="#939393" size="22" @click="pageRouter('/pages/setting/setting')"></u-icon>
      </view> -->
    </view>

    <view style="height: 100upx;background: linear-gradient(to right, #119FAF, #41C69E);" />



    <view style="margin-top: -100upx;display: flex;justify-content: center;">
      <view style="width: 90%;background-color: #fff;border-radius: 20upx;">
        <view class="order-status-box">
          <u-grid :border="false" :col="itemList.length">
            <u-grid-item v-for="(item, index) in itemList" :key="index" @click="pageRouter(item.page)">
              <u-icon :name="item.icon" :size="32" color="#119FAF"></u-icon>
              <text class="grid-title">{{ item.name }}</text>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </view>

    <u-gap height="30" bgColor="#F8F8F8"></u-gap>

    <view style="display: flex;justify-content: center;align-items: center;background-color: #F8F8F8;">
      <view>
        <u-icon name="bell-fill" size="30" color="red"></u-icon>
      </view>
      <view style="font-weight: bold;font-size: 35upx;">{{'为您推荐'}}</view>
    </view>
  <u-gap bg-color="#F8F8F8" height="10"></u-gap>
    <view style="display: flex;justify-content: center;">
      <view style="width: 95%;">
        <technician />
        </view>
      </view>
  </view>
</template>

<script>
  import orderStatus from '@/common/orderStatus'
  import technician from '@/pages/technician/index.vue'
  export default {
    components: {
      technician
    },
    data() {
      return {
        itemList: [{
          page: '/pages/address/list',
          icon: 'car-fill',
          name: '地址管理'
        }, {
          page: '',
          icon: 'account-fill',
          name: '关于我们'
        }, ],
        orderPage: '/pages/order/list',
        statList: [{
            value: '0',
            title: '我的收藏'
          },
          {
            value: '0',
            title: '我的消息'
          },
          {
            value: '0',
            title: '我的足迹'
          }
        ]
      }
    },
    onLoad() {
      if (this.hasLogin) {
        this.$store.dispatch('ObtainUserInfo')
      }
    },
    computed: {
      userInfo() {
        return this.$store.getters.userInfo
      },
      hasLogin() {
        return this.$store.getters.hasLogin
      },
      orderStatusList() {
        let orderStatusList = []
        for (let status in orderStatus) {
          if (status !== '40') {
            orderStatusList.push({
              name: orderStatus[status].name,
              status: status,
              icon: orderStatus[status].icon
            })
          }
        }
        return orderStatusList
      }
    },
    methods: {
      pageRouter(pageUrl) {
        if (!this.hasLogin) {
          uni.$u.route('/pages/login/social')
        } else {
          uni.$u.route(pageUrl)
        }
      },
      logout() {
        uni.showModal({
          title: '提示',
          content: '您确定要退出登录吗',
          success: res => {
            if (res.confirm) {
              this.$store.dispatch('Logout')
            } else if (res.cancel) {
              //console.log('用户点击取消')
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .user-header {
    background: linear-gradient(to right, #119FAF, #41C69E);
    @include flex-space-between;
    padding: 30rpx;
    height: 200rpx;

    .user-info {
      @include flex-left;

      align-items: center;

      .info-text {
        margin-left: 20rpx;

        .user-nickname {
          font-size: 30rpx;
          font-weight: 700;
          line-height: 50rpx;
          color: #fff;
        }

        .user-mobile {
          font-size: 24rpx;
          font-weight: 700;
          color: #fff;
          line-height: 50rpx;
        }
      }
    }

    .user-setting {
      margin-right: 5rpx;
    }
  }

  .order-status-box {
    padding: 40rpx 0;
  }

  .stat-box {
    padding: 20rpx 0;
  }

  .grid-title {
    line-height: 50rpx;
    font-size: 26rpx;
  }

  .grid-value {
    line-height: 50rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #2b85e4;
  }

  .fun-list {
    .fun-item {
      padding-top: 10rpx;
      padding-bottom: 10rpx;
      border-bottom: $custom-border-style;
    }
  }
</style>
